<template>
  <div class="all">
    <div class="top">
      

      <div class="inp">
        <van-field v-model="taocans.card_id" placeholder="请输入ICCID卡号" />
      </div>
      <div class="inp">
        <van-button
          :loading="ing"
          loading-text="加载中..."
          @click="gettaocan"
          type="primary"
          style="margin-bottom: 20rpx;width: 100%;background-color: #FFAA16;border-radius: 5px;border-color: #FFAA16;"
          >获取套餐</van-button
        >
      </div>
      <div class="hui k1 flexb">
        <div style="margin-top: 20px;">ICCID位置</div>
        <!-- <div class="red">* 每个账号最多可绑定3张流量卡</div> -->
      </div>
      <div class="tu"  v-if="list.list == ''">
        <img src="../../static/img/t9.png" />
      </div>
      
      <div v-if="havebind">
        <div class="k2 btn" @click='conbind' v-if="!bindload" >重新绑定</div>
        <div class="k2 btn" v-if="bindload" >绑定中</div>
      </div>
      
    </div>
    <!-- 		<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />

		<van-action-sheet v-model="show" title="标题" @select="onSelect">
		  <div class="content">内容</div>
		</van-action-sheet> -->
  </div>
</template>

<script>
import axios from "axios";
import bus from "@/assets/bus.js";
import { Dialog } from 'vant';
export default {
  name: "genghuan",
  data() {
    return {
      taocans: {
        card_id: "",
        package_id: "",
        type: "",
      },
      ing: false,
      chongzhizhong: false,
      show: false,
      list: {
        list: [],
      },
      //已绑定
      havebind: false,
      //当前日期
      nowdate:'',
      //绑定中
				bindload:false
    };
  },
  watch: {
    // num:function(newValue, oldValue) {
    //   console.log(newValue, oldValue)
    // }
  },
  computed: {
    // zongjia:function(){
    //   return this.num * 100
    // }
  },
  created() {},
  methods: {
    
    
    gettaocan: function () {
      if (this.taocans.card_id == "") {
        this.$toast("请填写iccid");
        return false;
      }
      this.ing = true;
      this.axios
        .get(
          this.url +
            `/mobile/api/findPackageWithIccid?type=1&iccid=` +
            this.taocans.card_id
        )
        .then((response) => {
          if (response.data.success == true) {
            if (response.data.code == 500) {
              this.$toast("卡不存在");
              this.havebind = false;
            } else if (response.data.code == 300) {
              this.havebind = true;
            } else {
              
              this.go('bangdingliuliang2',this.taocans.card_id,'bd')
              this.havebind = false;
              console.log(this.list.list)
            }
            this.ing = false;
          } else {
            this.$toast(response.data.message);
            this.ing = false;
          }
        });
    },
    //跳转
    go: function(url,canshu,type) {
      this.$router.push({
        path:url,
        query:{
          canshu:canshu,
          type:type
        }
      })
    },
	conbind(){
	  let that = this;
      this.chongzhizhong = true;
      //绑定中
			this.bindload=true
      this.axios
        .post(
          this.url +
            `/mobile/api/bandCard?card_id=${this.taocans.card_id}&package_id=1&type=1`
        )
        .then((response) => {
          if (response.data.success == true) {
            if (response.data.code == 300) {
              //吊起支付
              this.axios
                .post(
                  this.url +
                    `/mobile/api/wechatPay?price=` +
                    response.data.result +
                    `&title=首次绑卡`
                )
                .then((response) => {
                  WeixinJSBridge.invoke(
                    "getBrandWCPayRequest",
                    {
                      appId: response.data.result.appId,
                      timeStamp: response.data.result.timeStamp,
                      nonceStr: response.data.result.nonceStr,
                      package: response.data.result.package,
                      signType: "MD5",
                      paySign: response.data.result.paySign,
                    },
                    function (res) {
                      if (res.err_msg == "get_brand_wcpay_request:ok") {
                        that.$toast("绑定成功！");
                        setTimeout(() => {
                          that.$router.push("/");
                        }, 1000);
                      } else {
                        that.$router.push("/");
                      }
                    }
                  );
                });
            } else {
              this.$toast("绑定成功！");
              setTimeout(() => {
                this.$router.push("/");
              }, 1000);
            }
          } else {
            this.chongzhizhong = false;
            this.ing = false;
            this.$toast(response.data.message);
          }
        });
	},
   
  },
};
</script>

<style scoped lang="less">
.all {
  background: #F9F9F9;
  font-size: 0.28rem;
  min-height: 100vh;

  .van-radio {
    width: 100%;
    margin-bottom: 0.2rem;
  }
  .taocanx {
    .van-radio {
      margin-bottom: 0.2rem !important;
    }
  }
  .tu {
    text-align: center;
    // padding: 0.4rem 0;

    img {
      width: 6rem;
    }
  }

  .top {
  }

  .k1 {
    margin-bottom: 0.3rem;
  }

  .k3 {
    color: #ff6367;
    margin-bottom: 0.2rem;
  }

  .k2 {
    margin: 0.5rem 0;
  }

  .van-field {
    // background: #f7f7f7;
    border: 1px solid #b6b6b6;
    border-radius: 5px;
  }

  .red {
    color: #ff6367;
    font-size: 0.28rem;
    margin: 0 0.05rem;
  }

  .inp {
    position: relative;
    margin-bottom: 0.3rem;
    margin-top: 30px;
  }

  .inpa {
    position: absolute;
    right: 0.1rem;
    top: 7px;
    color: #ffffff;
    background: #ffb300;
    padding: 0 0.2rem;
    border-radius: 0.1rem;
    font-size: 0.28rem;
    line-height: 30px;
  }
}
</style>
